<template>
	<view class="luckbox">
		<view class="ranks">
			<view v-if="num != 1" class="list" v-for="(item,idx1) in num" :key="idx1">
				<text>{{idx1+1}}</text>
				<image v-if="idx > idx1" :src="winPrice[idx1].goods_image" mode=""></image>
			</view>
		</view>
		<view class="luckbox-title">
			<image src="https://img.50api.cn/vx.tongbayun.v3/raffle9.png" mode="heightFix"></image>
		</view>
		<view class="main-box" ref="scrollView">
			<view class="arrow-top">
				<text v-for="(item,index) in 5" :key="index">
					YRHM BOX
				</text>
				<image src="https://img.50api.cn/vx.tongbayun.v3/raffle2.png" mode="" class="arrow-top-img"></image>
			</view>
			<view class="goods-index" :style="{transform: 'translateX('+moveX+'px)',transition: miao+'s ease-in-out'}">
				<view class="main-box-content" v-for="(item,index) in handleGoods" :key="index">
					<view class="content-list" v-for="(goods,Gidx) in item" :key="Gidx">
						<!-- {{goods.goods_name}} -->
						<image :src="goods.goods_image" mode="" style="width: 130rpx;height: 130rpx;"></image>
					</view>
				</view>
			</view>
			<view class="arrow-up">
				<text v-for="(item,index) in 5" :key="index">
					YRHM BOX
				</text>
				<image src="https://img.50api.cn/vx.tongbayun.v3/reffle3.png" mode="" class="arrow-up-img"></image>
			</view>
		</view>

		<view class="btnTitle">{{btnTitle}} {{countDown}}S</view>
		<view class="kai" @click="kaiqi">一键开启</view>
		<u-popup v-model="show" mode="center">
			<view class="result" :style="{'background':'url('+bgurl+')','backgroundSize':'100% 100%'}">
				<u-navbar :immersive="true" back-icon-color="#fff" :border-bottom="false"
					:background="{'backgroundColor':''}" title=" "></u-navbar>
				<view class="rbox">
					<view class="tit">
						<image src="https://img.50api.cn/dingdang/cst.webp" mode="widthFix"></image>
					</view>
					<scroll-view class="goodsBox" scroll-y="true">
						
						<view class="cbox" :class="'c'+num">
							<view class="list"
								v-for="(item,idx) in winPrice" :key="idx">
								<view class="listprize">
									<view class="prize">
										<image class="prizeimg" :src="item.goods_image" mode=""></image>
										<image class="gradeicon" :src="item.odds_image_bg_text" mode=""></image>
									</view>
									<view class="name" v-if="num != 10">
										{{item.goods_title_text}}
									</view>
									<view class="price">￥{{item.goods_price}}</view>
								</view>
								<view class="btnfenj" @click="dempst(item.recordId)">分解</view>
								<view class="obtainlu">
									<text>可获得</text>
									<image class="obtainluimg" src="../../static/image/xr.png" mode=""></image>
									<text>{{item.exchange_integral_text}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="bottom" v-if="!isPay">
						<view class="btit" v-if="!isPay">*试玩结果仅供参考</view>
						<view class="btn" @click="jixu" v-if="istwo">
							继续开盒 x10
						</view>
						<view class="btn" @click="$.to('/pages/home/kaixiang?id='+boxId)" v-else>
							来发真的试试

						</view>
					</view>

					<view class="bottom" v-if="isPay">
						<view class="btit" v-if="!isPay">*试玩结果仅供参考</view>
						<!-- <view class="btn" @click="jixu" v-if="istwo">
							继续开盒 x10
						</view> -->
						<view class="allconvert" @click="alldempst">
							<view>全部分解</view>
							<view class="obtain">
								<text>可获得</text>
								<image class="obtainimg" src="../../static/image/xr.png" mode=""></image>
								<text>{{Luckytotal}}</text>
							</view>
						</view>
						<view class="btn" @click="shou">
							全部收下

						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <button @click="handleGoodsSort">开始</button> -->
	</view>
</template>

<script>
	// const chou = 'https://img.50api.cn/vx.tongbayun.v3/FinalVideo_1665316115.782023.mp3'
	const chou = '/static/mp3/Lotteryprocess.mp3'
	const fivechou = 'https://img.50api.cn/vx.tongbayun.v3/choujiang.mp3'
	const zhong = 'https://img.50api.cn/dingdang/zhongjiang.mp3'
	const choumusic = uni.createInnerAudioContext();
	const zhongmusic = uni.createInnerAudioContext();
	import config from "../../utils/config.js"
	const anjianyin = config.baseUrl + '/static/api/video/anjian.mp3'
	const anniumusic = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				moveX: 0,
				miao: 5,
				goodsDetails: [],
				countDown : 3,
				handleGoods: [],
				winPrice: [], // 抽中id
				showLenght: 0, // 需要展示的商品长度
				btnTitle: '', // 按钮名字 
				boxId: '',
				show: false,
				isPay: false, //是否正式抽
				bgurl: 'https://img.50api.cn/vx.tongbayun.v3/raffle1.jpg', //抽奖背景
				num: '', //几抽
				istwo: false, //是否有二抽
				daojishi: 0,
				groupedArrayNum: 0,
				idx: 0, //当前抽的第几发
				muteBgMusic: true,
				isDecom:true,
				Luckytotal:0,  //幸运币和
				kaiqiIsShow:true,
				divided:true
			}
		},
		onLoad(option) {
			this.muteBgMusic = option.music == 'true' ? true : false
			console.log(option);
			// #ifdef H5
			if (option.ooid) {
				this.boxId = option.boxid
				if (option.num == 20) {
					this.num = 10
					this.istwo = true
				} else {
					this.num = Number(option.num)
				}
				this.ooid = option.ooid
				this.isPay = true
				this.getData1(option.num).then(() => {
					this.getBox(option.boxid)
				})
			}
			// #endif
			console.log(this.num ,'this.numthis.numthis.num');
			
			zhongmusic.src = zhong 
			anniumusic.src = anjianyin
			uni.loadFontFace({
				family: 'myfont',
				source: 'url("https://img.50api.cn/dingdang/YouSheBiaoTiHei.ttf")',
			})
			uni.$on('cdata', (data) => {
				console.log(data, "数据接收");
				this.boxId = data.id
				this.btnTitle = data.btnTitle
				this.num = data.num
				this.isPay = false
               choumusic.src = data.num > 5 ? fivechou : chou
				this.getData().then(() => {
					this.getBox(data.id)
				})
			})
			uni.$on('paydata', (data) => {
				console.log(data, '数据接收');
				this.boxId = data.id
				this.num = data.num
				// if (data.num == 20) {
				// 	this.num = 10
				// 	this.istwo = true
				// } else {
				// 	this.num = data.num
				// }
				this.ooid = data.ooid
				this.isPay = true
				choumusic.src = data.num > 5 ? fivechou : chou
				this.getData1(data.num).then(() => {
					this.getBox(data.id)
				})
			})
			uni.$on('kaidata', (data) => {
				console.log(data, "数据接收");
				this.boxId = data.boxfl_id
				this.num = data.num
				this.isPay = true
				choumusic.src = data.num > 5 ? fivechou : chou
				this.getData2(data.id).then(() => {
					this.getBox(data.boxfl_id)
				})
			})
		},
		onUnload() {
			uni.$off('cdata')
			uni.$off('paydata')
			uni.$off('kaidata')
			if(this.muteBgMusic){
				this.$music.playBgm({
					mute: true
				});				
			}else{
				this.$music.playBgm({
					mute: false
				});			
			}
		},
		watch: {
			handleGoods: {
				handler(news) {
					this.startRun()
				},
				immediate: true
			},
			daojishi(newVal) {

			}
		},
		methods: {
			// 获取盒子
			getBox(id) {
				this.$http({
					url: "api/common/get_blind_box_goods",
					data: {
						blind_box_id: id
					}
				}).then(res => {
					console.log(res);
					console.log(res, "商品");
					if (res.data.code == 1) {
						this.goodsDetails = res.data.data.goods_list
						this.handleGoodsSort()
						// this.getBox()
					}
				}).catch(err => {});
			},

			// 测试盒子奖品
			getData() {
				return new Promise((resolve, reject) => {
					this.$http({
						url: "api/common/test_open_prize",
						data: {
							boxid: this.boxId,
							num: this.num
						}
					}).then(res => {
						console.log(res, "抽中的商品");
						if (res.data.code == 1) {
							this.winPrice = res.data.data
						} else {
							this.$tip.tip(res.data.msg)
						}
						resolve()
					}).catch(err => {
						reject()
					});
				})

			},
			shou() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				})
			},
			// 真实盒子奖品
			getData1(num) {
				return new Promise((resolve, reject) => {
					this.$http({
						url: "api/blind_box/open",
						data: {
							order_no: this.ooid
						}
					}).then(res => {
						console.log(res, "抽中的商品");
						if (res.data.code == 1) {
							if (res.data.code == 1) {
								this.winPrice = res.data.data
								let Luckyhe = []
								this.winPrice.forEach((item)=>{
									Luckyhe.push(item.exchange_integral_text)
								})
								console.log(Luckyhe,'Luckyhe');
								this.Luckytotal = Luckyhe.reduce((pre,cur)=>{
									return pre + cur;
								})
							} else {
								this.$tip.tip(res.data.msg)
							}
							resolve()

						} else {
							this.$tip.tip(res.data.msg)
						}
					}).catch(err => {
						reject()
					});
				})

			},
			// 大于5抽分批
			group(array, subGroupLength) {
				let index = 0;
				let newArray = [];
				while (index < array.length) {
					newArray.push(array.slice(index, index += subGroupLength));
				}
				return newArray;
			},
			// 调整商品顺序
			handleGoodsSort() {
				let goodsLength = this.goodsDetails.length
				if (this.num <= 5) {
					choumusic.play();
					console.log(this.num,'1111')
					for (let i = 0; i < this.winPrice.length; i++) {
						// 判断商品小于40见
						let getWinGoods = this.goodsDetails.find(item => item.id === this.winPrice[i].id) // 获取中奖商品
						let scrollData = null
						this.showLenght = goodsLength < 40 ? 45 : goodsLength
						scrollData = Array(this.showLenght).fill({}).map((item, idx) => {
							if (idx === 42) {
								return {
									...getWinGoods
								}
							} else {
								return {
									...this.goodsDetails[Math.floor(Math.random() * goodsLength)]
								}
							}
						})
						this.handleGoods.push(scrollData)

						// this.startRun()
					}
					let downTime = setInterval(() => {
						this.countDown -= 1
					},1000)
					setTimeout(() => {
						this.idx = 5
						clearInterval(downTime)
					}, 3000)
					setTimeout(() => {
						this.show = true
						choumusic.stop()
						if(this.kaiqiIsShow){
							zhongmusic.play()
						}
					}, 4000)
				} else {
					choumusic.play();
					let groupedArray = this.group(this.winPrice, 5); // 获取分批组数
					// this.groupedArrayNum = groupedArray.length
					// this.handleGoods = []
					// console.log(groupedArray ,'groupedArray')
					for (let z = 0; z < groupedArray.length; z++) {
						let groupNewArr = groupedArray[z] // 获取中奖
						console.log(groupNewArr, 'groupNewArr')
						setTimeout(() => {
							this.moveX = 0
							this.miao = 0
							this.handleGoods = []

							for (let i = 0; i < groupNewArr.length; i++) {
								// 判断商品小于40见
								let getWinGoods = this.goodsDetails.find(item => item.id === groupNewArr[i]
									.id) // 获取中奖商品
								console.log(groupNewArr[i].id, 'getWinGoods')
								let scrollData = null
								this.showLenght = goodsLength < 40 ? 45 : goodsLength
								scrollData = Array(this.showLenght).fill({}).map((item, idx) => {
									if (idx === 42) {
										return {
											...getWinGoods
										}
									} else {
										return {
											...this.goodsDetails[Math.floor(Math.random() * goodsLength)]
										}
									}
								})
								this.handleGoods.push(scrollData)
								// this.startRun()
							}
							this.countDown = 3
							let downTime = setInterval(() => {
								this.countDown -= 1
							},1000)
							setTimeout(() => {
								this.idx = this.idx + 5
								clearInterval(downTime)
							}, 3000)
						}, z * 5000)
					}

					setTimeout(() => {
						this.show = true
						choumusic.stop()
						if(this.kaiqiIsShow){
							zhongmusic.play()
						}
					}, groupedArray.length * 4500)

				}

				// console.log(this.handleGoods, 'this.handleGoods')
				// this.startRun()

			},
			onTabItemTap() {
			  // #ifdef APP-PLUS
			  if (uni.getSystemInfoSync().platform == "ios") {
			  	let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
			  	let impact = new UIImpactFeedbackGenerator();
			  	impact.prepare();
			  	impact.init(1);
			  	impact.impactOccurred();
			  }
			  if (uni.getSystemInfoSync().platform == "android") {
			  	uni.vibrateShort({
			  	  success: () => {
			  	    console.log('点击震动');
			  	  }
			  	});
			  }
			  // #endif
			},
			
			// 一键开启
			kaiqi() {
				this.kaiqiIsShow = false
				choumusic.stop()
				zhongmusic.play()
				this.$forceUpdate()
				this.show = true
			},
			//单个分解
			dempst(id){
				if(this.isDecom){
					this.$http({
						url: "api/order/prize_exchange",
						data: {
							id: id
						}
					}).then(res => {
						if (res.data.code == 1) {
							this.$tip.tip(res.data.msg)
							// this.isDecom = false
						} else {
							this.$tip.tip(res.data.msg)
						}
					}).catch(err => {});
				}else{
					uni.showToast({
						icon:"none",
						title:'已经分解'
					})
				}
			},
			alldempst(){
				if(!this.divided){
					return
				}
				let num = []
				this.winPrice.forEach(item => {
					num.push(item.recordId)
				})
				let numjo = num.join()
				// return
				this.$http({
					url: "api/order/prize_exchange",
					data: {
						id: numjo
					}
				}).then(res => {
					uni.showLoading({
						title: '分解中'
					});
					if (res.data.code == 1) {
						this.divided = false
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '分解完成'
							});
						}, 500)
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						this.divided = false
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg
							});
						}, 500)
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				}).catch(err => {});
			},
			startRun() {
				if(this.muteBgMusic){
					this.$music.playBgm({
						mute: true
					});				
				}else{
					this.$music.playBgm({
						mute: false
					});			
				}
				// clearInterval(dsMusic)
				// let endTime = 1
				
			
				
				uni.createSelectorQuery().in(this).select(".main-box").boundingClientRect(data => {
					this.miao = 3
					let scrollView = data.width
					this.moveX = -(scrollView / 5 * (this.showLenght - 5))
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.luckbox {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		// background: url('https://img.50api.cn/dingdang/qg.webp') no-repeat;
		background: url('https://img.50api.cn/vx.tongbayun.v3/raffle1.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.luckbox-title {
		font-size: 60rpx;
		font-weight: bold;
		color: #fff;
		margin-top: 20rpx;
		margin-left: 30rpx;

		image {
			height: 100rpx;
		}
	}

	.main-box {
		width: 750rpx;
		height: 900rpx;
		// background-color: rosybrown;
		// margin-top: 20rpx;
		position: relative;

		&-content {
			height: 150rpx;
			box-sizing: border-box;
			// background-color: blue;
			margin: 10rpx 0;
			display: flex;

		}

		.content-list {
			flex-shrink: 0;
			// width: 150rpx;
			width: calc(100% / 5);
			height: 150rpx;
			
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.content-list:nth-child(even) {
			// background-color: orangered;
		}

	}

	.main-box::before {
		content: '';
		display: inline-block;
		height: 100%;
		width: 150rpx;
		position: absolute;
		background-color: rgba(178, 58, 238, .1);
		left: 50%;
		margin-top: 50rpx;
		margin-left: -75rpx;
		z-index: 8;
	}



	.result {
		width: 100vw;
		height: 100vh;
	}

	.result .rbox {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}


	.result .rbox .tit {
		width: 750rpx;
		text-align: center;
	}

	.result .rbox .tit image {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
	}

	.result .rbox .bottom {
		width: 750rpx;
		font-family: 'myfont';
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			width: 260rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 38rpx;
			display: inline-block;
			margin-top: 20rpx;
			color: #FFFFFF;
			background: linear-gradient(104deg, #3B70EC 5%, #DE8BFB 88%);
		}
		.allconvert {
			width: 260rpx;
			height: 90rpx;
			border-radius: 20rpx;
			font-size: 38rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			margin-right: 30rpx;
			color: #FFFFFF;
			background: linear-gradient(104deg, #3B70EC 5%, #DE8BFB 88%);
			.obtain{
				font-size: 20rpx;
				font-family: "SimSun";
				display: flex;
				.obtainimg{
					width: 24rpx;
					height: 24rpx;
					margin: 0 8rpx;
				}
			}
		}
		.btit {
			color: #fff;
			font-size: 36rpx;
		}
	}


	.result .rbox .goodsBox {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 400rpx);
		width: 750rpx;
		position: absolute;
		left: 0;
		box-sizing: border-box;
		.c5{
			padding: 10rpx !important;
		}
		.cbox {
			display: flex;
		  justify-content: center;
			flex-wrap: wrap;
			width: 100%;
			padding: 50rpx;
			.list {
				width: 207rpx;
				text-align: center;
				border-radius: 12rpx;
				margin: 10rpx;
				.listprize{
					width: 207rpx;
					height: 284rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background: linear-gradient(144deg, #3B70EC 6%, #DE8BFB 90%);
					.prize{
						width: 183rpx;
						height: 183rpx;
						position: relative;
						background: #FFFFFF;
						border-radius: 12rpx;
						margin: 10rpx;
						.prizeimg{
							width: 135rpx;
							height: 135rpx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
						}
						.gradeicon{
							width: 128rpx;
							height: 48rpx;
							position: absolute;
							top: 144rpx;
							left: -20rpx;
						}
					}
					.price {
						/* margin-top: 1%; */
						padding-top: 5rpx;
						font-size: 30rpx;
						color: #fff;
						font-family: 'myfont';
						text-align: center;
					}
					.name {
						/* margin: 10rpx 0; */
						margin-top: 6rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #fff;
						font-size: 20rpx;
						padding: 0 16rpx;
					}
				}
				.btnfenj{
					width: 100%;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 22rpx;
					margin: 10rpx 0;
					border-radius: 12rpx;
					background: linear-gradient(106deg, #3B70EC 5%, #DE8BFB 88%);
				}
				.obtainlu{
					font-size: 22rpx;
					color: #630086;
					display: flex;
					justify-content: center;
					align-items: center;
					.obtainluimg{
						width: 24rpx;
						height: 24rpx;
						margin: 0 8rpx;
					}
				}
			}
		}
	}


	.arrow-top,
	.arrow-up {
		font-size: 20rpx;
		line-height: 50rpx;
		color: #7D26CD;
		display: flex;
		justify-content: space-between;
		height: 50rpx;
		width: 750rpx;
		display: flex;
		background: url('https://img.50api.cn/vx.tongbayun.v3/raffle1.jpg') no-repeat;
		background-size: 100% 100%;
		position: relative;

	}

	.arrow-top-img {
		position: absolute;
		width: 44rpx;
		height: 22rpx;
		left: 50%;
		margin-left: -22rpx;
		top: 40rpx;
		z-index: 10;
	}

	.arrow-up-img {
		position: absolute;
		width: 44rpx;
		height: 22rpx;
		left: 50%;
		margin-left: -22rpx;
		bottom: 40rpx;
		z-index: 10;
	}

	.goods-index {
		height: 900rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.ranks {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		padding: 0 20rpx;
		width: 100%;
		height: 72rpx;
		flex-wrap: wrap;
	}

	.ranks .list {
		border-radius: 16rpx;
		width: 52rpx;
		height: 52rpx;
		border: 1rpx solid #00E1DB;
		position: relative;
		padding: 10rpx;
		flex-shrink: 0;
		margin: 10rpx;
	}

	.ranks .list image {
		width: 100%;
		height: 100%;
	}

	.ranks .list text {
		position: absolute;
		right: -10rpx;
		top: -20rpx;
		color: rgba(99, 215, 214, 0.7);
		font-family: 'myfont';
		font-size: 32rpx;
	}

	.btnTitle {
		height: 100rpx;
		width: 500rpx;
		background: url('https://img.50api.cn/vx.tongbayun.v3/raffle6.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #7D26CD;

	}

	.kai {
		padding: 10rpx 20rpx;
		border-radius: 16rpx;
		margin-top: 10rpx;
		border: 1rpx solid #7D26CD;
		color: #7D26CD;
		display: inline-block;
		margin-left: 30rpx;
	}
</style>
